<template>
  <div>
    <div class="header">
      <a href="https://t.shuqi.com/cover/8007543"><img src="@/assets/image/one.png" alt=""></a>
      <h2>欢迎加入书旗大家庭</h2>
    </div>
    <!-- 文本框 -->
<van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block class="button">提交</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, Field } from 'vant'
Vue.use(Form)
Vue.use(Field)
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  margin-top: 100px;
  margin-bottom: 50px;
text-align: center;
 img{
width: 100%;
}
}
.button{
  color: white;
  font-weight: 900;
  background-color:goldenrod;
  border-radius: 5%;
  width: 100%;
  text-align: center;
  height: 30px;
  line-height: 30px;
  display: block;

}
</style>
